<template>
  <el-row
    v-loading="loading"
    element-loading-text="拼命上传中,请耐心等待"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <el-form :model="requestParams" ref="requestParams" :rules="rules" label-width="80px">
      <el-col :span="24" v-if="todos==1?true:false">
        <el-form-item label="项目名称" key="1" prop="proId">
          <el-select
            v-model="requestParams.proId"
            class="sel-style"
            :disabled="true"
            placeholder="请选择"
          >
            <el-option
              v-for="item in proArr"
              :key="item.project_id"
              :label="item.project_name"
              :value="item.project_id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="24" class="model-upload-style" v-if="todos==1||todos==3?true:false">
        <el-form-item label="模型上传" key="2" prop="taskIdVal">
          <!-- accept=".pbc" -->
          <el-upload
            class="upload-demo"
            action
            :http-request="uploadField"
            :on-success="handleAvatarSuccess"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="1"
            accept=".mv"
            :on-exceed="handleExceed"
            :file-list="requestParams.modelUrlArr"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
      </el-col>
      <el-col :span="24" v-if="todos==3?false:true">
        <el-form-item label="模型名称" key="3" prop="modelName">
          <el-input v-model="requestParams.modelName" placeholder="请输入模型名称"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24" v-if="todos==3?false:true">
        <el-form-item label="专业类别" key="4" prop="majorCate">
          <el-checkbox-group v-model="requestParams.majorCate">
            <el-checkbox v-for="(item,i) in majorCateArr" :key="i" :label="item.name"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-col>
      <el-col :span="24" v-if="todos==1||todos==3?true:false">
        <el-form-item label="版本号" key="5" prop="verNo">
          <el-input v-model="requestParams.verNo" placeholder="请输入版本号"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24" v-if="todos==3?false:true">
        <el-form-item label="说明" key="6">
          <el-input type="textarea" :rows="4" v-model="requestParams.remark" placeholder="请输入说明"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24" class="bottom-style">
        <el-button @click="onCancel">取消</el-button>
        <el-button type="primary" @click="onSure('requestParams')">确定</el-button>
      </el-col>
    </el-form>
  </el-row>
</template>
<script>
import { ModelManageApi, ModelManageGetApi } from "@/services/WorkCenter";
export default {
  props: {
    todos: Number,
    catchSave: Function,
    catchBack: Function,
    objRow: Object
  },
  data() {
    return {
      loading: false,
      iops: 0,
      image_Url: "",
      proArr: [],
      majorCateArr: [],
      requestParams: {
        proId: "",
        taskIdVal: "",
        modelUrlArr: [],
        modelName: "",
        majorCate: [],
        verNo: "",
        remark: "",
        modelSize: ""
      },
      rules: {
        proId: [
          { required: true, message: "项目名称不能为空", trigger: "change" }
        ],
        taskIdVal: [
          { required: true, message: "模型上传不能为空", trigger: "change" }
        ],
        modelName: [
          { required: true, message: "模型名称不能为空", trigger: "change" }
        ],
        majorCate: [
          { required: true, message: "专业类型不能为空", trigger: "change" }
        ],
        verNo: [
          { required: true, message: "版本号不能为空", trigger: "change" }
        ]
      }
    };
  },
  methods: {
    getModelManageToken(data) {
      //获取token值
      // window.sessionStorage.removeItem('MacroAuth');///api/macro-uaa/oauth/token
      window.sessionStorage.removeItem("MacroAuth");
      ModelManageGetApi.getBimApi({
        data: {}
      })
        .then(res => {
          window.sessionStorage.setItem("MacroAuth", res.data);
          this.uploadPBCFiel(data);
        })
        .catch(error => {
          console.log(error);
        });
    },
    //上传pbc文件
    uploadPBCFiel(data) {
      this.requestParams.modelSize =
        (data.file.size / 1024 / 1024).toFixed(1) + "M";
      this.loading = true;
      this.requestParams.taskIdVal = "";
      let formData = new FormData();
      formData.append("file", data.file);
      ModelManageApi.modelFieldUpload({
        data: formData
      }).then(res => {
        if (res.httpCode == 200) {
          this.requestParams.taskIdVal = res.data;
        }
        this.loading = false;
      });
    },
    //上传到OSS
    uploadField(data) {
      if (data.file.name.indexOf(".mv") != -1) {
        //.pbc文件上传
        this.getModelManageToken(data); //token
      } else {
        //只允许上传.pbc类型的文件
        this.loading = false;
        this.requestParams.taskIdVal = "";
        this.requestParams.modelUrlArr = [];
        this.$message.warning("只允许上传.mv类型的文件");
      }
    },
    handleAvatarSuccess(res, file) {
      if (this.requestParams.taskIdVal == "") {
        this.requestParams.modelUrlArr = [];
      }
      // this.form.imageUrl = URL.createObjectURL(file.raw);
    },
    handleRemove(file, fileList) {
      this.requestParams.taskIdVal = ""; //taskID值
      this.requestParams.modelUrlArr = [];
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log("点击展示=", file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    onCancel() {
      //取消
      this.onReset(); //重置
      this.catchBack();
    },
    addModel() {
      //新增模型
      ModelManageApi.saveMode({
        data: {
          modelName: this.requestParams.modelName,
          modelSize: this.requestParams.modelSize,
          modelSort: 0, //用不到
          modelTag: this.requestParams.majorCate.join(","),
          modelVersion: this.requestParams.verNo,
          projectId: this.requestParams.proId,
          taskId: this.requestParams.taskIdVal, //模型上传
          remark: this.requestParams.remark
        }
      })
        .then(res => {
          if (res.httpCode == 200) {
            this.$message.success("操作成功");
            this.catchSave();
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    editModel() {
      //编辑
      ModelManageApi.editMode({
        data: {
          modelId: this.objRow.modelId,
          modelName: this.requestParams.modelName,
          modelSort: 0, //用不到
          modelTag: this.requestParams.majorCate.join(","),
          remark: this.requestParams.remark
        }
      })
        .then(res => {
          if (res.httpCode == 200) {
            this.$message.success("操作成功");
            this.catchSave();
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    updateModel() {
      //更新模型
      ModelManageApi.updateMode({
        data: {
          modelId: this.objRow.modelId,
          modelSize: this.requestParams.modelSize,
          modelVersion: this.requestParams.verNo,
          taskId: this.requestParams.taskIdVal
        }
      })
        .then(res => {
          if (res.httpCode == 200) {
            this.$message.success("操作成功");
            this.catchSave();
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    onSure(data) {
      this.$refs[data].validate(valid => {
        if (valid) {
          if (this.todos == 1) {
            //新增
            this.addModel();
          } else if (this.todos == 2) {
            //编辑
            this.editModel();
          } else if (this.todos == 3) {
            //更新模型
            this.updateModel();
          }
        } else {
          return false;
        }
      });
    },
    onReset() {
      //重置
      this.requestParams.proId = "";
      this.requestParams.modelName = "";
      this.requestParams.remark = "";
      this.requestParams.majorCate = [];
      this.majorCateArr = [];
      this.proArr = [];
      this.loading = false;
      this.requestParams = this.$options.data().requestParams;
    },
    getEchoObj() {
      //编辑的时候回显
      this.requestParams.modelName = this.objRow.modelName;
      this.requestParams.majorCate = this.objRow.modelTag.split(",");
      this.requestParams.remark = this.objRow.remark;
    },
    getMajorPro() {
      this.requestParams.proId = this.objRow.pro_id;
      this.proArr = this.objRow.proArr;
      this.majorCateArr = this.objRow.majorCateArr;
      // console.log('获取专业类型和项目的值')
    }
  },
  watch: {
    todos(n, o) {
      if (n == 0) {
        this.onReset();
      }
      if (n != 0) {
        //获取专业类别/项目
        this.getMajorPro();
      }
      if (n == 2) {
        this.getEchoObj();
      }
      // console.log('w-todos=', n, 'objRow=', this.objRow, 'requestParams=', this.requestParams)
    }
  },
  created() {
    if (location.hostname === "localhost") {
      this.image_Url = "dev-hibuilding-new";
    } else if (location.hostname.split(".")[1] === "ihibuilding") {
      this.image_Url = "dev-hibuilding-new";
    } else if (location.hostname.split(".")[1] === "hibuilding") {
      this.image_Url = "hibuilding";
    }
    if (this.todos == 0) {
      this.onReset();
    }
    if (this.todos != 0) {
      //获取专业类别/项目
      this.getMajorPro();
    }
    if (this.todos == 2) {
      this.getEchoObj(); //数据回显
    }
    // console.log('c-todos=', this.todos, 'objRow=', this.objRow, 'requestParams=', this.requestParams)
  }
};
</script>
<style lang="scss">
.model-upload-style {
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}
</style>
<style lang="scss" scoped>
.bottom-style {
  text-align: center;
}
</style>